<!--
 * @Author: your name
 * @Date: 2021-08-24 10:47:09
 * @LastEditTime: 2021-12-03 13:53:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\Contents\page.vue
-->
<template>
    <div class="rotuerContent">
        <div class="rotuerContent_header">
            <Row :gutter="[10, 10]" type="flex" justify="space-between">
                <Col :xs="{ span: '24' }" :lg="{ span: '14' }">
                    <Row :gutter="[10, 10]">
                        <Col :xs="{ span: '16' }" :lg="{ span: '6' }">
                            <AInput default-value="" />
                        </Col>
                        <Col :xs="{ span: '4' }" :lg="{ span: '2' }">
                            <AButton class="btn" type="primary" ghost>
                                <svg-icon icon-class="search" size="1"></svg-icon>
                            </AButton>
                        </Col>
                        <Col :xs="{ span: '4' }" :lg="{ span: '3' }">
                            <AButton class="btn" type="primary" ghost>
                                <svg-icon icon-class="search" size="1"></svg-icon><span> 批量删除</span>
                            </AButton>
                        </Col>
                    </Row>
                </Col>
                <Col :xs="{ span: '24' }" :lg="{ span: '6' }">
                    <Row :gutter="[10, 10]" type="flex" justify="end">
                        <Col :xs="{ span: '5' }" :lg="{ span: '7' }">
                            <AInputGroup style="width: 100%" compact>
                                <ASelect default-value="启用">
                                    <ASelectOption value="启用"> 启用 </ASelectOption>
                                    <ASelectOption value="禁用"> 禁用 </ASelectOption>
                                </ASelect>
                            </AInputGroup>
                        </Col>
                        <Col :xs="{ span: '4' }" :lg="{ span: '6' }">
                            <Button class="btn" type="primary" ghost>
                                <svg-icon icon-class="search" size="1"></svg-icon><span> 刷新</span>
                            </Button>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
        <div class="rotuerContent_table">
            <Table
                :data-source="routerTree"
                :row-selection="rowSelection"
                :expanded-row-keys="expandedRowKeys"
                :expand-row-by-click="true"
                size="middle"
                :columns="columns"
                @expand="onexpand"
            >
                <template #Other="{ record }">
                    <!-- 删除 -->
                    <Button
                        class="btns"
                        type="danger"
                        shape="circle"
                        @click.stop="handleClick(record)"
                    >
                        <svg-icon icon-class="clear" size="1"></svg-icon>
                    </Button>
                    <!-- 编辑 -->
                    <Button
                        class="btns"
                        type="info"
                        shape="circle"
                        @click.stop="handleClick(record)"
                    >
                        <svg-icon icon-class="editorinfo" size="1"></svg-icon>
                    </Button>
                    <!-- 禁用 -->
                    <Button
                        class="btns"
                        type="primary"
                        shape="circle"
                        @click.stop="handleClick(record)"
                    >
                        <svg-icon icon-class="jinzhi" size="1"></svg-icon>
                    </Button>
                </template>
            </Table>
        </div>
    </div>
</template>
<script lange="ts" scoped>
import { defineComponent, ref, unref } from 'vue'
import { $ } from '@/ntils/EventBus'
import {  SetAesEncryLocal, GetAeDecryptLocal } from '@/ntils/hooks'
import { store } from '@/store/index'
import { Table, Tag, Row, Col, Button } from 'ant-design-vue'

export default defineComponent({
    name: 'LayPage',
    components: { Table, TableItem: Table.Column, Tag, Row, Col, Button },
    setup() {
        let columns = [
            {
                title: 'title',
                dataIndex: 'title',
                key: 'title',
            },
            {
                title: 'Roles',
                dataIndex: 'roles',
                key: 'roles',
            },
            {
                title: 'Tags',
                key: 'tags',
                dataIndex: 'tags',
                scopedSlots: { customRender: 'tags' },
            },
            {
                title: 'Other',
                key: 'Other',
                dataIndex: 'Other',
                slots: { customRender: 'Other' },
            },
        ]
        const routerData = store.state.routerArr
        let routerTree = ref([])
        function filterTree(arr, index) {
            let result = []
            arr.forEach((e, i) => {
                result.push({
                    title: e.name,
                    key: `${index}${i + 1}`,
                    tags: e.path,
                    roles: e.roles.join(','),
                    children: filterTree(e.children, i + 1),
                })
            })
            return result
        }
        routerTree.value = filterTree(routerData, '')
        // 事件
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          'selectedRows: ',
          selectedRows,
                )
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows)
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows)
            },
            getSelectRowKeys(e) {
                console.log(e)
            },
            setSelectedRowKeys(e) {
                console.log(e)
            },
        }
        let expandedRowKeys = ref()
        expandedRowKeys.value = []
        const onexpand = (expanded, record) => {
            if (expanded) {
                expandedRowKeys.value.push(record.key)
            } else if (expandedRowKeys.value.length) {
                expandedRowKeys.value = expandedRowKeys.value.filter(
                    (e) => e != record.key,
                )
            }
        }
        // 点击删除
        const handleClick = (key) => {
            console.log(key)
        }
        return {
            routerTree,
            expandedRowKeys,
            rowSelection,
            columns,
            onexpand,
            handleClick,
        }
    },
})
</script>
<style lang="less" scoped>
.rotuerContent_header {
  margin-bottom: 10px;
//   background: #fff;
  padding: 10px 10px;
  box-sizing: border-box;
}
.btns {
  margin: 0 5px;
  padding-top: 0.4rem;
}
.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  span {
    font-size: 13px;
    margin-left: 5px;
  }
}
</style>
